<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <TITLE>论坛--帖子列表</TITLE>

  <Link rel="stylesheet" type="text/css" href="style/style.css" -/>
</HEAD>

<BODY>

<div id="app">

  <DIV>
    <IMG src="image/logo.gif">
  </DIV>


  <!--      用户信息、登录、注册        -->
  <DIV class="h" id="logindiv">
	<span v-if="loginStatus == 1">
		<input type="hidden" value="yes" />
		欢迎您 <a href="#">{{userInfo.uname}}</a>
		<a href="javascript:void(0)" @click="signout()">退出</a>
	</span>
    <span v-if="loginStatus == 0">
		<input type="hidden" value="no" />
		您尚未&nbsp;<a href="login.html">登录</a>
		&nbsp;|&nbsp;<A href="reg.html">注册</A> |
	</span>
  </DIV>


  <!--      主体        -->
  <DIV>
    <!--      导航        -->
    <br/>
    <DIV>
      &gt;&gt;<B><a href="index.html">论坛首页</a></B>&gt;&gt;
      <B><a href="javascript:void(0);">{{boardInfo.boardname}}</a></B>
    </DIV>
    <br/>

    <form name="postForm">
      <input type="hidden" name="boardid" v-model="boardInfo.boardid">
      <input type="hidden" name="topicid" v-model="topicInfo.topicid">
      <input type="hidden" name="uid" v-model="userInfo.uid">
      <DIV class="t">
        <TABLE cellSpacing="0" cellPadding="0" width="100%">
          <TR>
            <td class="h" align="center" colSpan="3">
              <b v-if="type == 0">发表帖子</b>
              <b v-else-if="type == 1">回复帖子</b>
              <b v-else-if="type == 2">修改帖子</b>
              <b v-else-if="type == 3">修改回复</b>
            </td>
          </TR>

          <TR class="tr3">
            <th width="20%"><b>标题</b></th>
            <th><input class="input" id="title" style="padding-left: 2px; font: 14px Tahoma" tabindex="1" size="66" v-model="title" name="title"></th>
          </TR>

          <TR class="tr3">
            <th valign="top">
              <div><b>内容</b></div>
            </th>
            <th colspan="2">
              <div>
                <span>
                  <textarea class="content" style="width: 500px;" v-model="content" name="content" rows="20" cols="90" tabindex="2"></textarea>
                </span>
              </div>
              (不能大于：<font color="red">1000</font> 字)
            </th>
          </TR>
        </TABLE>
      </DIV>
      <div style="margin: 15px 0px; text-align: center;">
        <input class="btn" tabindex="3" style="margin-left: 45%;" type="button" @click="done()" value="提 交">
        <input class="btn" tabindex="4" type="reset" value="重 置">
      </div>
    </form>



  </DIV>
  <!--             声 明          -->
  <BR/>
  <CENTER class="gray">源辰信息</CENTER>

</div>

</BODY>

<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
<script type="text/javascript">

  // 使用axios时，利用原型模式给axios加入 Authorization头，这样每个请求会加入Authorization头部
  Vue.prototype.axios = axios;
  // 在每次请求时，前端携带token到请求头中
  axios.interceptors.request.use(config => {
    // 从localStorage 或 vuex 中获取 token
    const token = localStorage.getItem("token");
    // 如果有 token 就添加到请求头中
    if (token){
      config.headers.Authorization = token;
    } else {
      config.headers.Authorization = "";
    }
    console.log(token);
    console.log(config);
    return config;
  }, error => {
    return Promise.reject(error);
  });


  var index_app = new Vue({
    el: "#app",
    data: {
      type: 0,
      loginStatus: 0, // 登陆状态
      userInfo: {uid: 0}, // 用户信息
      boardInfo: {}, // 板块信息
      replyInfo: {},
      title: "",
      content: ""
    },
    methods: {
      done(){
        var _this = this;
        var params = new URLSearchParams();
        params.append("title", _this.title);
        params.append("content", _this.content);
        params.append("uid", _this.userInfo.uid);
        if (_this.type == 0){
          // 添加主贴
          params.append("boardid", _this.boardInfo.boardid);
          axios.post("/bbs-board/topic/addTopic", params).then( data => {
            let result = data.data;
            if (result.code == 1){
              alert("发表主题成功");
              window.open("list.html", "_self");
            }
          });
        } else if (_this.type == 1){
          // 添加主贴
          params.append("topicid", _this.topicInfo.topicid);
          axios.post("/bbs-board/reply/addReply", params).then( data => {
            let result = data.data;
            if (result.code == 1){
              alert("发表回复成功");
              window.open("detail.html", "_self");
            }
          });
        } else if (_this.type == 2){
          // 修改主贴
          params.append("boardid", _this.boardInfo.boardid);
          params.append("topicid", _this.topicInfo.topicid);
          axios.post("/bbs-board/topic/updateTopicById", params).then( data => {
            let result = data.data;
            if (result.code == 1){
              alert("更新主题成功");
              window.open("list.html", "_self");
            }
          });
        } else if (_this.type == 3){
          // 修改回贴
          params.append("replyid", _this.replyInfo.replyid);
          params.append("topicid", _this.topicInfo.topicid);
          axios.post("/bbs-board/reply/updateReply", params).then( data => {
            let result = data.data;
            if (result.code == 1){
              alert("更新回复成功");
              window.open("detail.html", "_self");
            }
          });
        }
      },
      signout(){
        var _this = this;
        if (localStorage.getItem("token") == null){
          // 本地没有token，则说明用户没有登录
          _this.userInfo = {};
          _this.loginStatus = 0;
          return;
        }
        //
        axios.get("/bbs-security/user/signout").then(data => {
          _this.userInfo = {};
          _this.loginStatus = 0;
          localStorage.removeItem("token");
        });
        window.open("index.html", "_self");
      },
      isOnLine(){
        var _this = this;
        // 如果浏览器的storage中无token，则说明 没有用户登录
        if (localStorage.getItem("token") == null){
          _this.userInfo = {};
          _this.loginStatus = 0;
          return;
        }
        axios.get("/bbs-security/user/loginCheck").then(data=>{
          if (data.data.code === 0){
            _this.loginStatus = 0;
          } else {
            _this.loginStatus = 1;
            _this.userInfo = data.data.data;
          }
        });
      }
    },

    // 页面的挂载
    mounted:function (){
      this.type = sessionStorage.getItem("type");
      this.topicInfo = JSON.parse(sessionStorage.getItem("topicInfo"));
      this.replyInfo = JSON.parse(sessionStorage.getItem("replyInfo"));
      this.boardInfo = JSON.parse(sessionStorage.getItem("boardInfo"));

      // 修改主题时的操作
      if (this.type == 2){
        this.title = this.topicInfo.title;
        this.content = this.topicInfo.content;

      } else if (this.type == 3){
        this.title = this.replyInfo.title;
        this.content = this.replyInfo.content;
      }
      //     isOnLine()判断用户是否登录，同时可以获取 userInfo
      axios.all( [this.isOnLine()] ).then(axios.spread(function (d1){
      }));
    }
  });
</script>

</HTML>
